<template>
  <div style="line-height:0px">
    <div style="text-align: left;">
      <el-button icon="el-icon-edit" style="margin-left: 20px" type="success" @click="show">登记车辆</el-button>
      <span style="margin-left: 20px">车牌号：</span>
      <el-input v-model="page.data.carNum" style="width: 130px" clearable placeholder="请输入车牌号"></el-input>
      <span style="margin-left: 20px">用户姓名：</span>
      <el-input v-model="page.data.name" style="width: 120px" clearable placeholder="请输入姓名"></el-input>
      <span style="margin-left: 20px">用户电话：</span>
      <el-input v-model="page.data.phone" style="width: 150px" clearable placeholder="请输入用户电话"></el-input>
      <el-button icon="el-icon-search" style="margin-left: 30px;margin-top: 15px" type="primary" @click="found">查找
      </el-button>
      <el-button icon="el-icon-download" style="margin-left: 30px" slot="trigger" type="success" @click="download">导出
      </el-button>
    </div>
    <el-table class="tableBorder" :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }" :row-style="{ 'height': '20px' }" :data="tableData"
      style="width: 100% ;margin-top: 30px" :stripe="true" :border="true" :highlight-current-row="true" size="mini">
      <el-table-column prop="id" label="车辆ID" width="80px" row>
      </el-table-column>
      <el-table-column prop="carNum" label="车牌号" width="120px">
      </el-table-column>
      <el-table-column label="车辆状态" width="100px">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status == 'y'">正常</el-tag>
          <el-tag type="danger" v-else-if="scope.row.status == 'n'">失效</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="用户名" width="100px">
        <template slot-scope="scope">
          <span v-if="scope.row.owner == null">{{ scope.row.name }}</span>
          <span v-else-if="scope.row.owner != null">{{ scope.row.owner }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="电话号码" width="150px">
      </el-table-column>
      <el-table-column prop="regTime" label="登记时间" width="150px">
      </el-table-column>
      <el-table-column prop="endTime" label="到期时间" width="150px">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary " @click="handleEdit(scope.row)">修改</el-button>
          <el-button size="mini" @click="handlexf(scope.row)">续费</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="text-align:center">
      <el-pagination :background="true" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="page.pagePlus.current" :page-sizes="page.pagePlus.pagesizes" :page-size="page.pagePlus.size"
        layout="total, sizes, prev, pager, next, jumper" :total="page.pagePlus.total">
      </el-pagination>
    </div>
    <el-dialog title="车辆登记" width="25%" :visible.sync="dialogFormVisible" append-to-body center
      :close-on-click-modal="false">
      <el-form>
        <el-form-item label="车牌号码">
          <el-input v-model="car.carNum" autocomplete="off" placeholder="请输入车牌号:" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="车主姓名">
          <el-input v-model="car.owner" autocomplete="off" placeholder="请输入车主姓名" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="车主电话">
          <el-input v-model="car.phone" autocomplete="off" placeholder="请输入车主电话" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="办理时长">
          <el-input v-model="car.xfTime" autocomplete="off" placeholder="请输入停车办理时长/（季度）" style="width: 220px">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addCar">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="车辆详情" width="25%" :visible.sync="updialogFormVisible" append-to-body center
      :close-on-click-modal="false">
      <el-form>
        <el-form-item label="车牌号码">
          <el-input :disabled="true" v-model="upcar.carNum" autocomplete="off" placeholder="请输入车牌号:"
            style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="车主姓名">
          <el-input v-model="upcar.owner" autocomplete="off" placeholder="请输入车主姓名" style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="车主电话">
          <el-input v-model="upcar.phone" autocomplete="off" placeholder="请输入车主电话" style="width: 220px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upcancel">取 消</el-button>
        <el-button type="primary" @click="upCar">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="停车续费" width="25%" :visible.sync="xfdialogFormVisible" append-to-body center
      :close-on-click-modal="false">
      <el-form>
        <el-form-item label="车牌号码">
          <el-input :disabled="true" v-model="xfcar.carNum" autocomplete="off" placeholder="请输入车牌号:"
            style="width: 220px"></el-input>
        </el-form-item>
        <el-form-item label="办理时长">
          <el-input v-model="xfcar.xfTime" autocomplete="off" placeholder="请输入续费时长/（季度）" style="width: 220px">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="xfcancel">取 消</el-button>
        <el-button type="primary" @click="xfCar">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      car: {
        carNum: "",
        owner: "",
        phone: "",
        xfTime: "",
      },
      upcar: {
        id: "",
        carNum: "",
        owner: "",
        phone: "",
      },
      xfcar: {
        id: "",
        carNum: "",
        xfTime: "",
      },
      options: [{
        value: '0',
        label: '售出'
      }, {
        value: '1',
        label: '空闲'
      }, {
        value: '2',
        label: '维修'
      }, {
        value: '3',
        label: '租用'
      }],
      tableData: [],
      dialogFormVisible: false,
      updialogFormVisible: false,
      xfdialogFormVisible: false,
      page: {
        data: {
          name: "",
          phone: "",
          carNum: "",
        },
        pagePlus: {
          current: 1,
          size: 10,
          pagesizes: [10, 20, 50, 100],
          total: 100,
        },
      },
    }
  },
  methods: {
    download() {
      this.$axios
        .post("http://127.0.0.1:8080/api/v1/car/car/download", this.page, {
          responseType: "blob",
        }).then((flow) => {
          console.log(flow);
          if (!flow.data) return;
          const blob = new Blob([flow.data]);
          const blobUrl = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.style.display = "none";
          a.download = "车辆表.xlsx"; // 自定义下载的文件名
          a.href = blobUrl;
          a.click();
        });
    },
    xfCar() {
      this.$axios({
        method: 'post',
        url: "http://127.0.0.1:8080/api/v1/car/car/update",
        data: this.xfcar,
      }).then((r) => {
        if (r.data.code == 200) {
          this.xfcancel();
          this.xfsuccess();
          this.list();
        }
      })
    },
    upCar() {
      this.$axios({
        method: 'post',
        url: "http://127.0.0.1:8080/api/v1/car/car/update",
        data: this.upcar,
      }).then((r) => {
        if (r.data.code == 200) {
          this.upcancel();
          this.upsuccess();
          this.list();
        }
      })
    },
    handlexf(car) {
      this.xfcar.id = car.id;
      this.xfcar.carNum = car.carNum;
      this.xfdialogFormVisible = true;
    },
    handleEdit(car) {
      this.$axios({
        method: 'post',
        url: "http://127.0.0.1:8080/api/v1/car/car/getCarInfo",
        data: car,
      }).then((r) => {
        if (r.data.code == 200) {
          let car = r.data.data;
          this.upcar.id = car.id;
          this.upcar.carNum = car.carNum;
          this.upcar.phone = car.phone;
          if (car.owner == null) {
            this.upcar.owner = car.name;
          } else {
            this.upcar.owner = car.owner;
          }
          this.updialogFormVisible = true;
        }
      })
    },
    addCar() {
      this.$axios({
        method: 'post',
        url: "http://127.0.0.1:8080/api/v1/car/car/add",
        data: this.car,
      }).then((r) => {
        if (r.data.code == 200) {
          this.cancel();
          this.addsuccess();
          this.list();
        }
      })
    },
    xfcancel() {
      this.xfdialogFormVisible = false;
      this.xfcar.id = null;
      this.xfcar.xfTime = "";
    },
    upcancel() {
      this.updialogFormVisible = false;
      this.upcar.carNum = "";
      this.upcar.phone = "";
      this.upcar.id = null;
      this.upcar.owner = "";
    },
    cancel() {
      this.dialogFormVisible = false;
      this.car.carNum = "";
      this.car.phone = "";
      this.car.xfTime = "";
      this.car.owner = "";
    },
    show() {
      this.cancel();
      this.dialogFormVisible = true;
    },
    addsuccess() {
      this.$message({
        showClose: true,
        message: '车辆添加成功',
        type: 'success'
      });
    },
    xfsuccess() {
      this.$message({
        showClose: true,
        message: '续费成功',
        type: 'success'
      });
    },
    upsuccess() {
      this.$message({
        showClose: true,
        message: '信息修改成功',
        type: 'success'
      });
    },
    list() {
      this.$axios({
        method: 'post',
        url: "http://127.0.0.1:8080/api/v1/car/car/list",
        data: this.page,
      }).then((r) => {
        this.tableData = [];
        if (r.data.code == 200) {
          this.tableData = r.data.data.records;
          this.page.pagePlus.total = r.data.data.total;
        }
      })
    },
    found() {
      this.list();

    },
    handleSizeChange(val) {
      this.page.pagePlus.size = val;
      this.list();

    },
    handleCurrentChange(val) {
      this.page.pagePlus.current = val;
      this.list();
    },
  },
  created() {
    this.list();
  }
}
</script>